<div class="layui-fluid" id="VIEW-group" lay-title="用户管理">
        <div class="layui-card" id="user_add" style="display: none;">
            <div class="layui-card-body layui-row layui-col-space10">
                <div class="layui-card-body" style="padding: 15px;">
                    <form class="layui-form" action="" id="form_user_add" lay-filter="user_add">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>用户名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="loginName" placeholder="用户名" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>密码:</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="pwd" placeholder="密码" lay-verify="required" autocomplete="off" class="layui-input">
                                    <input type="hidden" id="psw" name="psw"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>组织机构:</label>
                                <div class="layui-input-inline">
                                    <ul id="organizationTree" name="organizationTree" class="dtree" data-id="0"></ul>
                                    <input type="hidden" id="oid" name="oid"/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>用户姓名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" placeholder="用户姓名" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>性别:</label>
                                <div class="layui-input-inline">
                                    <div class="layui-col-md6">
                                        <select name="gender" lay-verify="">
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>联系电话:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="phone" placeholder="联系电话" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="xing">*</span>状态:</label>
                            <div class="layui-input-inline">
                                <div class="layui-col-md6">
                                    <select name="state" lay-verify="">
                                        <option value="1">在用</option>
                                        <option value="0">停用</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item"style="width:100%">
                            <label class="layui-form-label"><span class="xing">*</span>角色列表:</label>
                            <div class="layui-input-inline" style="width: 70.5%" id="roles">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="form-user-submit">保存</button>
                                <button type="reset" id="user_add_reset" class="layui-btn layui-btn-primary">清除</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-card" id="user_edit" style="display: none;">
            <div class="layui-card-body layui-row layui-col-space10">
                <div class="layui-card-body" style="padding: 15px;">
                    <form class="layui-form" action="" lay-filter="form-user">
                        <div class="layui-form-item"style="width:100%">
                            <label class="layui-form-label"><span class="xing">*</span>角色列表:</label>
                            <div class="layui-input-inline" style="width: 70.5%" id="showroles">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>用户姓名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" placeholder="用户姓名" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>组织机构:</label>
                                <div class="layui-input-inline" style="width:50%">
                                    <ul id="organizationTree_show" name="organizationTree_show" class="dtree" data-id="0"></ul>
                                    <input type="hidden" id="gid" name="gid"/>
                                    <input type="hidden" id="hidId" name="hidId">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>联系电话:</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="phone" name="phone" placeholder="联系电话" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>性别:</label>
                                <div class="layui-input-inline">
                                    <div class="layui-col-md6">
                                        <select id="gender" name="gender" >
                                            <option >-请选择-</option>
                                            <option value="0">女</option>
                                            <option value="1">男</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="form-user-edit">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">清除</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    <div class="layui-card">
        <div class="layui-card-header">
            <i class="layui-icon layui-icon-user"></i>&nbsp;用户管理
        </div>
        <div class="layui-row" style="width: 98%;margin: 0 auto;">
            <div class="layui-row">
                <div class="layui-card-body">
                    组织机构:
                    <div class="layui-input-inline" style="width:250px">
                        <ul id="organizationTree_sel" name="organizationTree_sel" class="dtree" data-id="0"></ul>
                        <input type="hidden" id="organization" name="organization"/>
                    </div>
                    <button id="search" class="layui-btn" lay-submit
                            lay-filter="provinceSearch" data-type="reload">
                        <i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>

                <table id="customer-table" class="layui-hide" lay-filter="customer-table"></table>
            </div>
            </div>
            <div class="layui-card-body">
                <table id="user-table" class="layui-hide" lay-filter="user-table"></table>
            </div>
    </div>
</div>

    <script type="text/html" id="user_bar">
        <a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a class="layui-btn layui-btn-xs" lay-event="resetPwd"><i class="layui-icon">&#xe79b;</i>重置密码</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>
    <script type="text/html" id="user_line_bar">
        {{#  if(d.state == '1' && d.loginName!='sys_admin'){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="stop"><i class="layui-icon">&#xe89a;</i>停用</a>
        {{#  } else if(d.state == "0" && d.loginName!='sys_admin'){ }}
        <a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="start"><i class="layui-icon">&#xe78b;</i>启用</a>
        {{#  } }}
        {{#  if(d.loginName!='sys_admin'){ }}
        <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe83f;</i>编辑</a>
        {{#  } }}
    </script>
</div>
<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'jquery','laydate','dtree','selectN','selectM','md5'], function (admin, table, form, dropdown,$) {
        var view = $('#VIEW-list-table');
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            ,md5=layui.md5
            , dtree = layui.dtree
            ,selectN = layui.selectN
            ,selectM = layui.selectM
            , form = layui.form
            ,index
            ,OrganizationTree_Show;

        form.render();


        //加载树
        dtree.renderSelect({
            elem: "#organizationTree",
            initLevel: "20", //默认为2
            skin: "layui",
            line: true,
            url: "api/v1/ucenter/sysOrganization/getOrganizationlist",
            dataFormat: "list"  //配置data的风格为list
        });
        // 绑定节点点击
        dtree.on("node('organizationTree')" ,function(obj){
            $("#oid").val(obj.param.nodeId);
        });
        dtree.renderSelect({
            elem: "#organizationTree_sel",
            url: "api/v1/ucenter/sysOrganization/getOrganizationlist",
            selectValue: "", // 你可以在这里指定默认值
            skin: "layui",
            initLevel: "20", //默认为2
            line: true,
            dataFormat: "list"  //配置data的风格为list
        });

        // 绑定节点点击
        dtree.on("node('organizationTree_sel')" ,function(obj){
            $("#organization").val(obj.param.nodeId);
        });
        //多选标签-所有配置
        var tagInsAdd = selectM({
            //元素容器【必填】
            elem: '#roles'

            //候选数据【必填】
            ,data: 'api/v1/ucenter/sys-role/getRolelist'

            //最多选中个数，默认5
            ,max : 999

            //input的name 不设置与选择器相同(去#.)
            ,name: 'roles'

            //值的分隔符
            ,delimiter: ','

            //候选项数据的键名
            ,field: {idName:'roleId',titleName:'roleName'}


        });
        //多选标签-所有配置
        var tagInsEdit = selectM({
            //元素容器【必填】
            elem: '#showroles'

            //候选数据【必填】
            ,data: 'api/v1/ucenter/sys-role/getRolelist'

            //最多选中个数，默认5
            ,max : 999

            //input的name 不设置与选择器相同(去#.)
            ,name: 'roles'

            //值的分隔符
            ,delimiter: ','

            //候选项数据的键名
            ,field: {idName:'roleId',titleName:'roleName'}


        });

        /* 监听提交 */
        form.on('submit(form-user-edit)', function (data) {
            var role = '';
            if(data.field.roles==null || data.field.roles ==="")
            {
                layer.msg("角色不能为空！");
                return false;
            }
            admin.put({
                api: "changeUser",
                data:{
                    "hidId":$("#hidId").val(),
                    "gid":data.field.gid,
                    "name":data.field.name,
                    "gender":data.field.gender,
                    "phone":data.field.phone,
                    "state":data.field.state,
                    "roles":data.field.roles
                },
                //请求成功
                success:function(res){
                    layer.close(index);
                    layer.msg(res.data);
                    table.reload('user-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });

            return false;
        });
        /* 监听提交 */
        form.on('submit(form-user-submit)', function (data) {
            if(data.field.pwd.length<6 || data.field.pwd.length>32)
            {
                layer.msg("密码长度应在6-32位之间！");
                return false;
            }
            if(data.field.loginName.length<1 || data.field.loginName.length>16)
            {
                layer.msg("用户名长度应在1-16位之间！");
                return false;
            }
            if(data.field.oid==null || data.field.oid ==="")
            {
                layer.msg("请选择组织机构！");
                return false;
            }
            if(data.field.roles==null || data.field.roles ==="")
            {
                layer.msg("请选择角色！");
                return false;
            }
            data.field.psw=md5(md5(data.field.pwd) + "scgngms0.01");
            admin.post({
                api: "addUser",
                data:{
                    "loginName":data.field.loginName,
                    "psw":data.field.psw,
                    "oid":data.field.oid,
                    "name":data.field.name,
                    "gender":data.field.gender,
                    "phone":data.field.phone,
                    "state":data.field.state,
                    "roles":data.field.roles,
                    "id":data.field.hidId
                    },
                //请求成功
                success:function(res){
                    $("#user_add_reset").click();
                    layer.close(index);
                    layer.msg(res.data);
                    table.reload('user-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
            return false;
        });

        table.render({
            elem: '#user-table'
            ,height: 'full-165'
            ,api: 'getUser' //数据接口
            ,title: '用户管理'
            ,page: true //开启分页
            ,even: true //开启隔行背景
            ,toolbar:'#user_bar'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }

            ,cols: [[ //表头
                { title: '', type: 'checkbox', fixed: true, width: "3%" },
                { title: 'userId',field: 'showId', width: 0, hide: true },
                { title: 'roleId',field: 'roleId', width: 0, hide: true },
                { title: 'oid',field: 'oid', width: 0, hide: true },
                { title: '用户名', field: 'loginName', width: "5%" },
                { title: '是否停用',field: 'state',templet: function(d){
                        if(d.state=="0"){
                            return "是";
                        }else if(d.state=="1"){
                            return "否";
                        }
                    }, width: "5%"},
                { title: '用户姓名', field: 'name', width: "8%"},
                { title: '性别',field: 'gender',templet: function(d){
                        if(d.gender=="0"){
                            return "女";
                        }else if(d.gender=="1"){
                            return "男";
                        }
                    }, width: "4%"},
                { title: '联系电话', field: 'phone', width: "8%"},
                { title: '组织机构',field: 'groupName', width: "15%"},
                { title: '角色名', field: 'roleNames', width: "8%"},
                { title: '角色备注',field: 'roleRemarks', width: "20%"},
                { title: '数据权限标识',field: 'dataPerm', width: "8%"},
                { fixed: 'right', title:'操作', toolbar: '#user_line_bar', width:"15%"}
            ]]
            ,done:function(){
                // 隐藏列
                $(".layui-table-box").find("[data-field='showId']").css("display","none");
                $(".layui-table-box").find("[data-field='roleId']").css("display","none");
                $(".layui-table-box").find("[data-field='oid']").css("display","none");
                $("#user-table").css("width", "100%");
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('user-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        organization:$('#organization').val()
                    }
                }, 'data');
            }
        };
        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听行工具
        table.on('tool(user-table)', function(obj){
            var data = obj.data;
            if(OrganizationTree_Show == undefined){
                //加载树
                OrganizationTree_Show = dtree.renderSelect({
                    elem: "#organizationTree_show",
                    url: "api/v1/ucenter/sysOrganization/getOrganizationlist",
                    dataFormat: "list",  //配置data的风格为list
                    done: function(){
                        dtree.click(OrganizationTree_Show, data.oid); // 会自动帮你触发一次对应Id的节点的点击事件
                        $("div[dtree-click='itemNodeClick'][dtree-id='organizationTree_show'][data-id='"+data.oid+"']").click();
                    }
                });
            }
            else {
                dtree.click(OrganizationTree_Show, data.oid); // 会自动帮你触发一次对应Id的节点的点击事件
                $("div[dtree-click='itemNodeClick'][dtree-id='organizationTree_show'][data-id='"+data.oid+"']").click();
            }
            // 绑定节点点击
            dtree.on("node('organizationTree_show')" ,function(obj){
                $("#gid").val(obj.param.nodeId);
            });

            if(obj.event === 'edit'){
            index = layer.open({
                type: 1
                ,anim: 5
                ,shade: 0
                ,maxmin: false
                ,area:['800px','500px']
                ,title:'修改数据'
                ,content: $('#user_edit')
            });
            $("#nowgroup").val(data.groupName);
            $("#gid").val(data.gid);
            $("#name").val(data.name);
            var select = 'dd[lay-value=' + data.gender + ']';
            $('#gender').siblings("div.layui-form-select").find('dl').find(select).click();
            $("#phone").val(data.phone);
            $("#dataPerm").val(data.dataPerm);
            var roleId = data.roleId.split(',');
            tagInsEdit.set(roleId);
            $("#hidId").val(data.showId);
            }
            else {
                admin.put({
                    api: "updateUser",
                    data:{
                        "hidId":data.showId,
                        "way":obj.event
                    },
                    //请求成功
                    success:function(res){
                        if (res.success && res.code == 2000) {
                            layer.msg("已成功操作数据");
                        }
                        table.reload('user-table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
            }

        });
        //头工具栏事件
        table.on('toolbar(user-table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var tips="";
            var id="";
            if(obj.event === 'add'){
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['800px','600px']
                    ,title:'新增数据'
                    ,content: $('#user_add')
                });

            }
            else if(obj.event === 'resetPwd'){
                layer.confirm('是否重置密码？', {
                    btn: ['确认','取消'] //按钮
                }, function(){
                    if(obj.event === 'resetPwd'){
                        tips="密码已重置为：123456";
                        if(checkStatus.data.length==0){
                            layer.msg("请至少选择一条数据！");
                            return false;
                        }
                        for(var i=0; i<checkStatus.data.length; i++){
                            id+=checkStatus.data[i].showId+",";
                        }
                        admin.put({
                            api: "resetPwd",
                            data: {
                                "userId":id,
                            },
                            success: function(res) {
                                if (res.success && res.code == 2000) {
                                    layer.msg(tips);
                                }
                                table.reload('user-table', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                        });
                    }
                });

            }
            else{
                layer.confirm('是否删除？', {
                    btn: ['确认','取消'] //按钮
                }, function(){

                    if(obj.event === 'del'){
                        tips="已删除";
                        if(checkStatus.data.length==0){
                            layer.msg("请至少选择一条数据！");
                            return false;
                        }
                        for(var i=0; i<checkStatus.data.length; i++){
                            if(checkStatus.data[i].showId == '615602503764934656'){
                                layer.msg("管理员账户 "+checkStatus.data[i].loginName+" 不可删除！");
                                return false;
                            }
                            id+=checkStatus.data[i].showId+",";
                        }
                        admin.delete({
                            api: "deleteUser",
                            data: {
                                "userId":id,
                            },
                            success: function(res) {
                                if (res.success && res.code == 2000) {
                                    layer.msg(tips);
                                }
                                table.reload('user-table', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                        });
                    }
                });
            }

        });
    })
</script>